<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <!-- 显示回答内容 -->
      <div>{{ answer }}</div>
      <!-- 或使用 el-text（如果需样式） -->
      <el-text type="info">{{ answer }}</el-text>
    </div>
    <div>
      <el-input v-model="question" placeholder="输入问题"></el-input>
      <button @click="ask">问一下</button>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'; // 修正导入
import { ref } from 'vue';

const question = ref('');
const answer = ref('');

function ask() {
  axios.post('http://localhost:5001/ask', {
    question: question.value 
  })
  .then(res => {
    answer.value = res.data.answer;
  })
  .catch(error => {
    console.error('请求失败:', error);
    answer.value = '请求出错，请重试';
  });
}
</script>